$style: #e5373b;

page{
	background-color: #F9F9F9;
}

.my-more{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	line-height: 1;
	.my-more-title{
		font-size: 36rpx;
		font-weight: bold;
	}
	.my-more-link{
		font-size: 28rpx;
		color: #999999;
	}
	.iconfont{
		font-size: 20rpx;
		display: inline-block;
		vertical-align: middle;
		margin-left: 13rpx;
	}
}

#index {
	.search {
		height: 78rpx;
		background-color: #fff;
		padding-top: 50rpx;
		padding-bottom: 40rpx;

		.bar {
			width: 690rpx;
			margin: 0 auto;
			height: 78rpx;
			border-radius: 38rpx;
			border: 2rpx solid #222222;
			display: flex;
			align-items: center;
			padding: 0 36rpx;
			overflow: hidden;
			box-sizing: border-box;

			.iconfont {
				display: block;
				font-size: 29rpx;
				color: #000000;
				flex-shrink: 0;
				font-weight: bold;
				margin-right: 19rpx;
			}

			input {
				width: 100%;
				flex-grow: 1;
				background-color: transparent;
				border: none;
				border-radius: 0;
			}

			.search-text{
				font-size: 26rpx;
				color: #999999;
				flex-shrink: 0;
				padding-left: 36rpx;
				position: relative;
				&::before{
					position: absolute;
					content: '';
					width: 1rpx;
					height: 20rpx;
					background: #CFD5DD;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	}

	.banner {
		swiper {
			width: 100%;
			height: 384rpx;
			.navlink {
				width: 100%;
				height: 100%;
			}
			image {
				width: 100%;
				height: 100%;
			}
			.wx-swiper-dot{
				width: 30rpx;
				height: 6rpx;
				border-radius: 3rpx;
			}
			.wx-swiper-dots-horizontal{
				bottom: 30rpx;
			}
		}

		// .swiper-pagination-bullet {
		// 	background-color: #fff;
		// 	opacity: 1;
		// 	&.swiper-pagination-bullet-active {
		// 		background-color: #ff626a;
		// 		opacity: 1;
		// 	}
		// }
	}

	.menu {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 0 30rpx 28rpx;
		background-color: #fff;

		.item {
			display: block;
			width: 100rpx;
			text-align: center;
			margin: 0 37rpx 22rpx;

			image {
				display: block;
				width: 100%;
				height: 100rpx;
			}

			.item-text {
				text-align: center;
				font-size: 24rpx;
				line-height: 1;
				margin-top: 27rpx;
			}
		}
	}

	.news {
		width: 100%;

		.mod {
			padding: 0 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				width: 65rpx;
				height: 27rpx;
			}

			.more {
				display: inline-flex;
				align-items: center;

				text {
					font-size: 24rpx;
					color: #666;
				}

				.iconfont {
					font-size: 17rpx;
					margin-left: 15rpx;
				}
			}
		}

		.scroll {
			width: 100%;
			// height: 204rpx;
			overflow-x: auto;
			margin-top: 30rpx;

			.list {
				width: auto;
				// height: 204rpx;
				display: flex;
				float: left;
				padding: 0 12rpx 0 32rpx;
			}

			.item {
				width: 418rpx;
				// height: 204rpx;
				background-color: #f7f7f7;
				padding: 20rpx;
				border-radius: 4rpx;
				display: flex;
				align-items: center;
				flex-shrink: 0;
				margin-right: 20rpx;

				image {
					width: 164rpx;
					height: 164rpx;
					margin-right: 16rpx;
				}

				.text {
					width: 198rpx;

					.title {
						font-size: 24rpx;
						line-height: 36rpx;
						height: 72rpx;
					}

					.label {
						overflow: hidden;
						margin-top: 30rpx;

						text {
							display: inline-block;
							height: 32rpx;
							border-radius: 4rpx;
							padding: 0 12rpx;
							background-color: #ffebeb;
							color: $style;
							font-size: 20rpx;
						}
					}
				}
			}
		}
	}

	.activity {
		padding: 0 32rpx;
		margin-top: 55rpx;
		display: flex;
		justify-content: space-between;

		.area {
			width: 50%;

			.mod {
				display: flex;
				align-items: center;

				.title {
					height: 27rpx;
					width: auto;
				}

				.time {
					display: inline-flex;
					align-items: center;
				}
			}

			&.xian {
				.mod {
					.time {
						margin-left: 16rpx;

						view {
							display: inline-block;
							height: 30rpx;
							line-height: 30rpx;
							background-color: $style;
							color: #fff;
							padding: 0 8rpx;
							font-size: 24rpx;
							border-radius: 4rpx;
						}

						text {
							font-size: 24rpx;
							color: $style;
							margin: 0 4rpx;
						}
					}
				}

				.items {
					border-right: 1px solid #f0f0f0;
				}
			}

			&.miao {
				.mod {
					padding-left: 16rpx;

					.time {
						margin-left: 16rpx;

						view {
							font-size: 24rpx;
						}

						text {
							font-size: 28rpx;
							font-weight: bold;
							color: $style;
							margin-left: 5rpx;
						}
					}
				}
			}

			.items {
				width: 100%;
				margin-top: 20rpx;
				padding-bottom: 20rpx;
				display: flex;
				justify-content: space-between;

				.item {
					display: block;
					width: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 172rpx;
						display: block;
					}

					.price {
						width: 100%;
						margin-top: 10rpx;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: flex-end;

						.real {
							color: $style;
							font-size: 18rpx;

							text {
								font-size: 26rpx;
								font-weight: bold;
							}
						}

						.del {
							font-size: 18rpx;
							color: #999;
							text-decoration: line-through;
						}
					}
				}
			}
		}
	}

	.links {
		// width: 686rpx;
		margin-top: 25rpx auto 0;
		padding: 0 25rpx;
		overflow: hidden;

		.item {
			display: block;
			float: left;
			width: 33%;
			height: 288rpx;
			border-top: 1px solid #f0f0f0;
			border-left: 1px solid #f0f0f0;
			border-bottom: 1px solid #f0f0f0;

			image {
				width: 100%;
				height: 100%;
			}

			&:nth-child(3n + 1) {
				border-left: none;
			}
		}
	}

	.my-more{
		margin-top: 59rpx;
		margin-bottom: 39rpx;
	}
}